<template>
  <div>

    <FuncSearch @add-func="addFunc" @batch-remove="batchRemove"/>

    <Table ref="funcTable" border :columns="columns" :data="data"
           :row-class-name="generatorRowClass"
           @on-selection-change="selection = $event">
      <template #name="{ row }">
        <strong>{{ row.funcName }}</strong>
      </template>

      <template #action="{ row, index }">
        <Button type="success" icon="md-add-circle" size="small" style="margin-right: 5px" @click="addBtn(row)">添加按钮</Button>
        <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editFunc(row)">修改</Button>
        <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(index)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                          :items-per-page="pageSize"
                          :show-page-size="5" force-ellipses/>
        </div>
      </template>

    </Table>


    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="720"
        :mask-closable="false"
        @on-close="closeWin(false)"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <FuncForm @close-win="closeWin" ref="func" :drawer="drawer.row"></FuncForm>
    </Drawer>

    <!--  引入 btn 管理组件  -->
    <BtnForm ref="btnForm" v-model="btnWin" :func="drawer.func" @close-win="showBtns"></BtnForm>

  </div>
</template>
<script>
import FuncForm from '../components/func/FuncForm.vue'
import BtnForm from '../components/func/BtnForm.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue'
import FuncSearch from "../components/func/FuncSearch.vue";
import BtnList from '../components/func/BtnList.vue'

export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "",
        row: {funcName: "", url: "", remark: "", sorted: 1, state: true, menus: []},
        func: {id: "", funcName: "", remark: ""} ,  // 绑定按钮选中的功能
      },
      btnWin: false,
      page: 1,
      total: 110,
      pageSize: 10,
      selection: [],
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, {row}) => {
            return h(BtnList, {func: {id: row.id, funcName: row.funcName, remark: row.remark}})
          }
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '功能名',
          slot: 'name'
        },
        {
          title: '路由地址',
          key: 'url'
        },
        {
          title: '所属菜单',
          key: 'menuNames'
        },
        {
          title: '顺序',
          key: 'sorted'
        },
        {
          title: '权限标记',
          key: 'remark'
        },
        {
          title: '状态',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action',
          width: 280,
          align: 'center'
        }
      ],
      data: [
        {
          id: 1,
          funcName: '系统管理',
          url: "/sysView",
          remark: 'sys:view',
          sorted: 2,
          state: true,
          menus: [1, 2] ,
          menuNames: ["系统管理", "菜单管理"]
        },
        {
          id: 2,
          funcName: '菜单管理',
          url: "/funcView",
          remark: 'func:view',
          sorted: 3,
          state: true,
          menus: [1] ,
          menuNames: ["系统管理"]
        },
      ],
    }
  },
  methods: {
    addFunc(){
      this.drawer.state = true ;
      this.drawer.title = "添加功能" ;
      this.drawer.row = {funcName: "", url: "", remark: "", sorted: 1, state: true, menus: []}
    },
    batchRemove(){
      if (this.selection.length === 0) {
        this.$tips.warning("请至少选中一个需要删除的菜单");
      } else {
        this.$tips.confirm("您确定要删除该菜单吗?").then(() => {
          // 删除多个菜单
          console.log(this.selection.map(menu => menu.id));
        })
      }
    },
    editFunc(row) {
      this.drawer.state = true ;
      this.drawer.title = "修改功能" ;
      this.drawer.row = {...row} ;
    },

    remove(index) {
      this.$tips.confirm("您确定要删除该功能吗?").then(ret => {
        this.data.splice(index, 1);
      })
    },
    generatorRowClass(row, index){
       return "func-row-" + row.id ;
    },
    addBtn(row) {
      this.$refs.btnForm.resetValidForm();
      this.btnWin = true ;
      this.drawer.func = {...row};
    },
    showBtns(funcId){
       // 查找当前行下是否展开按钮列表
       let expendTd = document.querySelector(`.func-row-${funcId}+tr .ivu-table-expanded-cell`);
       if (expendTd == null) {
         // 弹出按钮列表窗口, 此时会自动触发 BtnList 对应的 created 钩子函数
         document.querySelector(`.func-row-${funcId} .ivu-table-cell-with-expand i`).click();
       }
    },
    closeWin(status){
      this.drawer.state = false;
      this.$refs.func.resetValidForm();
    }
  },
  components: {
    FuncSearch,
    FuncForm,
    BtnForm,
    DotTag,
    VanPagination,
    BtnList
  }
}
</script>

<style>

td.ivu-table-expanded-cell {
  padding: 5px 10px;
}
</style>
